<%@ page import="com.uni.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户信息中心</title>
	<link rel="icon" href="img/weblogo.png" >
	<link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
	<link rel="stylesheet" type="text/css" href="css/ycc.css"/>
	<script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
	<script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/card_user_info.js"></script>
</head>
<body>
<%
    User user = (User) session.getAttribute("userInfo");

%>
	<div class="row">
		<div class="col-md-3 div-card">
			<h3 class="h-title-black">
				<i class="bi bi-person-lines-fill"></i>
				基本信息
			</h3>
			<!-- 修改个人信息 -->
			<ul class="ul-text-show">
				<li class="text-center"><img class="img-circle" src="img/head.jpg"></li>
				<li><span>用户名: </span><%=user.getName()%></li>
				<li><span>电话: </span><%=user.getPhone()%></li>
					<!-- Bs modal -->
					<button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo" style="width: 100%">修改</button>

				<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">
									<i class="bi bi-pencil-square"></i>
									修改个人信息
								</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body">
								<form>
									<div class="mb-3">
										<h5>
											<i class="bi bi-telephone"></i>
											新的联系电话
										</h5>
										<input type="text" class="form-control input-phone" id="recipient-name">
										<span></span>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
								<button type="button" class="btn btn-primary bt-mdify-ok">确认修改</button>
							</div>
						</div>
					</div>
				</div>
			</ul>

		</div>

		<!-- 显示浏览记录 -->
		<div class="col-md-8 div-card">
			<h3 class="h-title-black">
				<i class="bi bi-clock-history"></i>
				浏览记录 共${sessionScope.commodityRecords.size()}条
				<c:if test="${not empty sessionScope.historyPageNow && sessionScope.commodityRecords.size() > 0}">
					[${sessionScope.historyPageNow},${sessionScope.historyPageNow+1}] 条
				</c:if>

				<c:if test="${sessionScope.commodityRecords.size() == 0}">
					<h5 class="text-center">您暂无任何浏览记录.</h5>
				</c:if>
			</h3>
			<div class="row row-cols-1 row-cols-md-2 g-4">
				<c:set var="pageNow" scope="page" value="${sessionScope.historyPageNow}"></c:set>

				<c:forEach items="${sessionScope.commodityRecords}" begin="${pageNow}" end="${pageNow + 1}" var="cr" varStatus="index">
					<c:if test="${index.index <= sessionScope.commodityRecords.size()}">
						<div class="card-commodity-row">
							<div class="card-commodity" data-uid="${cr.user.id}" data-cid="${cr.commodity.id}">
								<img src="${cr.commodity.img}" class="card-img-top">
								<div class="card-body">
									<h5 class="card-title text-center">￥${cr.commodity.price}</h5>
									<h6>商品名称: <span>${cr.commodity.name}</span></h6>
									<h6 class="card-text" href="#">商品类型: ${cr.commodity.typeName}</h6>
									<a class="card-text" href="#">商品描述: ${cr.commodity.info}</a>
									<p>商家: <a href="#">${cr.user.name}</a></p>
								</div>
								<div class="card-footer">
									<small class="text-muted">上次浏览日期:  ${fn:replace(cr.time, ".0", "")}</small>
								</div>
							</div>
						</div>
					</c:if>
				</c:forEach>
			</div>

			<c:if test="${sessionScope.commodityRecords.size() > 0}">
				<nav aria-label="Page navigation example">
					<ul class="pagination justify-content-center">
						<li class="page-item p-2"><a class="page-link text-black bg-warning" href="/historyPage">更多</a></li>
					</ul>
				</nav>
			</c:if>
		</div>
	</div>

</body>
</html>